<template>
  <el-row class="detail-row">
    <Title title="客户信息" font-size="16px" style="margin-bottom:8px;"/>
    <el-form
      label-position="right"
      label-width="110px"
      class="lineHeight32" >
      <el-col v-if="isClientInfo" :span="8">
        <el-form-item label="客户名称:">
          <div class="flex">
            <ToolTip v-if="clientInfo" :content="clientInfo.clientName" />
            <span v-else>--</span>
            <contrast-info-tipTool
              :origin-data="configureClientInfo"
              :new-data="clientInfo"
              :correlate-filed="['clientName']"
              style="margin-left:5px;"
            >
              <span slot="tipContent">
                {{ getTargetData(configureClientInfo, 'clientName') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="isClientInfo && !isProject" :span="8">
        <el-form-item label="客户联系人:">
          <div class="flex">
            <div v-if="clientInfo" class="flex" style="width: 100%">
              <ToolTip :content="clientInfo.contactPerson" style="max-width: calc(100% - 110px)" />
              <div style="margin: 0 3px;">/</div>
              <SecretText :is-tool-tip="false" :log-text="`渠道订单${orderInfo.orderId}的客户联系人`" :origin-text="clientInfo.tel" />
            </div>
            <span v-else>--</span>
            <contrast-info-tipTool
              :origin-data="configureClientInfo"
              :new-data="clientInfo"
              :correlate-filed="['contactPerson', 'tel']"
              style="margin-left:5px;"
            >
              <span slot="tipContent">
                {{ getTargetData(configureClientInfo, 'contactPerson') + ' / ' + getTargetData(configureClientInfo, 'tel') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户类型:">
          <span v-if="clientInfo && (clientInfo.clientType || clientInfo.clientType === 0)">{{ clientInfo.clientType | clientStatusFilter }}</span>
          <span v-else>{{ '--' }}</span>
          <contrast-info-tipTool
            :origin-data="configureClientInfo"
            :new-data="clientInfo"
            :correlate-filed="['clientType']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureClientInfo, 'clientType') === '--' ? '--' : ( clientStatusFilter(getTargetData(configureClientInfo, 'clientType')) ) }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户ID:">
          <span v-if="clientInfo"> {{ clientInfo.clientId || '--' }}</span>
          <span v-else>--</span>
          <contrast-info-tipTool
            :origin-data="configureClientInfo"
            :new-data="clientInfo"
            :correlate-filed="['clientId']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureClientInfo, 'clientId') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户结算单:">
          <!-- 最终单不能发起客户结算 -->
          <template v-if="orderInfo.orderType !== 9">
            <span v-if="clientInfo && clientInfo.clientSettlementId" class="link" @click="goTo()">{{ clientInfo.clientSettlementId }}</span>
            <span v-else-if="!orderIndraft && !isProject" class="link" @click="goTo()">发起客户结算</span>
            <span v-else>--</span>
          </template>
          <template v-else>
            <span v-if="clientInfo && clientInfo.clientSettlementId">{{ clientInfo.clientSettlementId }}</span>
            <span v-else>--</span>
          </template>
          <contrast-info-tipTool
            :origin-data="configureClientInfo"
            :new-data="clientInfo"
            :correlate-filed="['clientSettlementId']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureClientInfo, 'clientSettlementId') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户结算状态:">
          <span v-if="clientInfo"> {{ clientInfo.clientSettlementStatus | clientSettlementStatus }}</span>
          <span v-else>{{ '--' }}</span>
          <!-- <contrast-info-tipTool
            :origin-data="configureClientInfo"
            :new-data="clientInfo"
            :correlate-filed="['clientSettlementStatus']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureClientInfo, 'clientSettlementStatus') === '--' ? '--' : ( clientSettlementStatus(getTargetData(configureClientInfo, 'clientSettlementStatus')) ) }}
            </span>
          </contrast-info-tipTool> -->
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户订单编号:">
          <ToolTip :content="clientInfo && clientInfo.customerOrderNum" />
        </el-form-item>
      </el-col>
      <el-col v-if="isClientInfo" :span="8">
        <el-form-item label="实际客户名称:">
          <div class="flex">
            <ToolTip v-if="clientInfo" :content="clientInfo.actualClientName" />
            <span v-else>--</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="isClientInfo && !isProject" :span="8">
        <el-form-item label="实际客户联系人:">
          <div class="flex">
            <div v-if="clientInfo" class="flex" style="width: 100%">
              <ToolTip :content="clientInfo.actualContactPerson" style="max-width: calc(100% - 110px)" />
              <div style="margin: 0 3px;">/</div>
              <SecretText :is-tool-tip="false" :log-text="`渠道订单${orderInfo.orderId}的客户联系人`" :origin-text="clientInfo.actualTel" />
            </div>
            <span v-else>--</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属集团:">
          <ToolTip v-if="clientInfo" :content="clientInfo.group" />
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { clientStatusFilter, clientSettlementStatus } from '@/filters/status';
import ContrastInfoTipTool from './contrastInfoTiptool';
import Title from '@/components/Title';
import { getTargetData } from '@/utils';
export default {
  filters: {
    clientStatusFilter,
    clientSettlementStatus },
  components: { Title, ContrastInfoTipTool },
  props: {
    isClientInfo: {
      type: Boolean,
      default: true
    },
    isProject: {
      type: Boolean,
      default: false
    },
    clientInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    orderInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    configureClientInfo: { // 调整单id
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  computed: {
    // 订单状态为草稿中或待发布
    orderIndraft() {
      return this.orderInfo && (this.orderInfo.orderStatus === 0 || this.orderInfo.orderStatus === 1);
    }
  },
  methods: {
    clientStatusFilter,
    getTargetData,
    // 点击客户结算单跳转
    goTo() {
      const { clientSettlementId, clientName, clientSettleDBId } = this.clientInfo;
      if (!clientSettlementId) {
        this.$router.push({
          name: 'customersettle',
          query: { clientName, orderId: this.orderInfo.orderId }
        });
        return false;
      }
      const routeUrl = this.$router.resolve({
        name: 'settleCustomer',
        params: { id: clientSettleDBId }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.link {
  color: #406EFF;
  cursor: pointer;
}
.flex {
  display: flex;
}
.detail-row {
  background-color: #fff;
  padding: 15px 24px 0 24px;
  &::v-deep {
    .el-form-item__label {
      color: #999;
      white-space: nowrap;
    }
    .el-form-item__content {
      color: #333;
    }
  }
}
</style>
